<template>
  <div id="print-tables">
    <el-table
      id="print-tables"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;padding:5px;"
      row-key="areaId"
      border
      ref="singleTable"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :header-cell-style="{
            background: '#333333',
            color: '#ffffff',
            textAlign: 'center'
          }"
      @selection-change="selectListChanage"
      @select="selectChanage"
    >
      <el-table-column align="center" prop="momName" label="母亲姓名" width="240"></el-table-column>
      <el-table-column align="center" prop="birthTime" label="出生日期" width="180"></el-table-column>
      <el-table-column align="center" prop="barCode" label="条形码号" width="180"></el-table-column>
      <el-table-column align="center" prop="experimentKeywords" label="实验项目"></el-table-column>
      <el-table-column align="center" prop="babySex" label="性别"></el-table-column>
      <el-table-column align="center" prop="bloodTime" label="采血日期"></el-table-column>
      <el-table-column align="center" prop="receiveTime" label="验收日期"></el-table-column>
      <el-table-column align="center" prop="deliveryId" label="批号"></el-table-column>
      <el-table-column align="center" prop="deliveryDepart" label="递送机构"></el-table-column>
      <el-table-column align="center" prop="deliveryTime" label="递送日期"></el-table-column>
      <el-table-column align="center" prop="deliveryMan" label="递送人员"></el-table-column>
    </el-table>
  </div>
</template>
<script >
export default {
  name: "tableTree",
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableTitle: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    // 详情
    clickDetails(v) {
      this.$emit("clickDetails", v);
    },
    // 修改
    clickEdit(v) {
      this.$emit("clickEdit", v);
    },
    // 选中数据
    selectListChanage(v) {
      let data = [];
      v.forEach(item => {
        if (item.pTrue && item.children && item.children.length > 0) {
          item.children.forEach(i => {
            data.push(i);
          });
        } else {
          data.push(item);
        }
      });
      this.$emit("tabSelectChange", data);
    },
    // 勾选数据
    selectChanage(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1;
      if (row.pTrue && row.children && row.children.length > 0) {
        row.children.forEach(i => {
          this.$refs.singleTable.toggleRowSelection(i, true);
        });
      }
      if (selected == false) {
        if (row.pTrue) {
          row.children.forEach(i => {
            this.$refs.singleTable.clearSelection();
          });
        }
      }
    }
  }
};
</script>

<style lang="less">
#print-tables {
  td {
    padding: 3px 0 !important;
  }
  th {
    padding: 5px 0 !important;
  }
  .el-table__header {
    th {
      border: none;
    }
    th:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    th:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
  .statistics {
    padding: 10px;
    .hiddenRow {
      display: none;
    }
    .searchForm {
      padding: 10px;
      span.label {
        margin-right: 10px;
      }
      span.attention {
        color: #e50021;
      }
    }
  }
}
</style>
